<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import UnlockMask from './unlock-mask/index.vue'

import {
  curType,
  dateList,
  curYearIdx,
  curMonthIdx,
  curDayIdx,
  fortuneList,
  result,
  mbtiType,
  suggestionTitle,
  typeTitle,
  suggestionList,
  typeList,
  lockedStatus,
  defaultScore
} from './data'
import { init, clear, switchType, switchDate } from './data'
import { imagePath } from '@/libs/file-utils'
import { userInfo } from '@/libs/user'
import { showUnlockMask } from './unlock-mask/data'
import { safeArea } from '@/libs/config'

let safeTop = safeArea.top2
// #ifndef MP
safeTop = safeArea.top + 80
// #endif

const img_bg = imagePath('quiz/fortune/result/bg.jpg')

const img_info_bg = imagePath('quiz/fortune/result/info-bg.png')
const img_info_sub_1_bg = imagePath('quiz/fortune/result/info-sub-1-bg.png')
const img_info_sub_2_bg = imagePath('quiz/fortune/result/info-sub-2-bg.png')
const img_star = imagePath('main/home/star.png')

const detail_title = imagePath('quiz/fortune/result/detail-title.png')
const detail_content = imagePath('quiz/fortune/result/detail-content.png')

const suggest_title_bg = imagePath('quiz/fortune/result/suggestion-title-bg.png')

const lock_icon = imagePath('lock-icon.svg')
const lock_arrow = imagePath('icon-arrow-dbl.svg')

const defaultText = '点击解锁详情版，点击解锁详情版点击解锁详情版点击解锁详情版，点击解锁详情版点击解锁详情版，点击解锁详情版点击解锁详情版点击解锁详情版，点击解锁详情版点击解锁详情版点击解锁详情版'

onMounted(init)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-fortune-result"
    :showTopBar="false"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <!-- <div
      class="main-title"
      :style="{
        marginTop: safeTop,
        backgroundImage: img_title
      }"
    ></div> -->

    <!-- 说明 -->
    <div
      class="info"
      :style="{
        marginTop: safeTop + 10 + 'rpx',
        backgroundImage: img_info_bg
      }"
    >
      <div class="type-box">
        <div
          v-for="(item, idx) in typeList"
          :key="idx"
          class="item"
          :class="{ active: curType === item.key }"
          @click="switchType(item.key)"
        >{{ item.name }}</div>
      </div>

      <div
        class="sub-box-1"
        :style="{ backgroundImage: img_info_sub_1_bg }"
      >
        <div class="date-list">
          <div
            v-for="(item, idx) in dateList[curType]"
            :key="idx"
            class="item"
            :class="{ active: curType === 1 ? curDayIdx === idx : curType === 2 ? curMonthIdx === idx : curType === 3 ? curYearIdx === idx : false }"
            @click="switchDate(idx)"
          >{{ item }}</div>
        </div>

        <div class="nickname">{{ userInfo?.nickname }} {{ mbtiType }}</div>
        <div class="birthday">{{ userInfo?.zodiacSign }}.{{ userInfo?.birthday }}</div>

        <div class="score-title">{{ typeTitle[curType] }}得分</div>
        <div class="score-number"><span style="font-size: 80rpx;">{{ result?.score || defaultScore
        }}</span>分</div>
      </div>

      <div
        class="sub-box-2"
        :style="{ backgroundImage: img_info_sub_2_bg }"
      >
        <div class="today-title">
          <div class="title">{{ typeTitle[curType] }}运势</div>
          <div
            v-for="index in result?.stars || 0"
            :key="index"
            class="star"
            :style="{ backgroundImage: img_star }"
          ></div>
        </div>

        <div
          v-for="(item, index) in fortuneList"
          :key="index"
          class="bar"
        >
          <div
            class="icon"
            :style="{ backgroundImage: item.icon }"
          ></div>
          <div class="name">{{ item.shortTitle }}</div>
          <div class="progress">
            <div
              class="inner"
              :style="{
                width: item.score + '%',
                backgroundColor: item.color_bg,
                boxShadow: `0 -8rpx 9rpx 0 ${item.color_inner_in} inset, 0 0 4rpx 0 ${item.color_inner_out}`
              }"
            ></div>
          </div>
          <div class="score">{{ item.score }}%</div>
        </div>
      </div>
    </div>

    <!-- 详细说明 -->
    <div
      v-for="(item, index) in fortuneList"
      :key="index"
      class="detail"
    >
      <div
        class="title"
        :style="{ backgroundImage: detail_title }"
      > {{ item.title }}：</div>
      <div
        class="desc"
        :style="{ backgroundImage: detail_content }"
      >
        <div class="inner">{{ item.desc }}</div>
      </div>
    </div>

    <!-- 建议 -->
    <div class="suggest">
      <div
        class="title-image"
        :style="{ backgroundImage: suggestionTitle[curType] }"
      ></div>

      <div
        v-if="suggestionList.length"
        v-for="(item, index) in suggestionList"
        :key="index"
        class="item"
      >
        <div
          v-if="lockedStatus"
          class="lock-mask"
          @click="showUnlockMask = true"
        >
          <div
            class="lock-icon"
            :style="{ backgroundImage: lock_icon }"
          ></div>
          {{ lockedStatus.tip }}
          <div
            class="lock-icon"
            :style="{ backgroundImage: lock_arrow }"
          ></div>
        </div>

        <div
          class="icon"
          :style="{ backgroundImage: item.icon }"
        ></div>
        <div
          class="title"
          :style="{ backgroundImage: suggest_title_bg }"
        >{{ item.title }}</div>
        <div class="description">{{ item.description || defaultText }}</div>
      </div>
      <div
        v-else
        class="wait"
      >加载中...</div>
    </div>

    <template #page>
      <UnlockMask />
    </template>
  </PageWrapper>
</template>

<style lang="less" scoped>
// .main-title {
//   width: 388rpx;
//   height: 116rpx;

//   margin: 0 auto;
// }

.info {
  width: 724rpx;
  height: 928rpx;

  margin-left: 20rpx;

  box-sizing: border-box;
  padding-top: 64rpx;

  .type-box {
    margin-left: 56rpx;

    display: flex;

    .item {
      height: 74rpx;

      padding: 0 30rpx;

      color: #9E509C;
      font-size: 40rpx;
      line-height: 74rpx;

      border-radius: 31rpx;

      &.active {
        color: #fff;

        background-color: #F590A4;
        box-shadow: -6rpx -6rpx 13rpx 0 rgba(240, 0, 216, .25) inset, 0 4rpx 5rpx 0 rgba(97, 15, 101, .28);
      }
    }
  }

  .sub-box-1 {
    position: relative;
    width: 612rpx;
    height: 230rpx;

    margin-top: 30rpx;
    margin-left: 50rpx;

    .date-list {
      margin-top: 24rpx;
      margin-left: 12rpx;

      display: inline-flex;

      .item {
        margin: 0 4rpx;
        box-sizing: border-box;
        padding: 6rpx 10rpx;

        color: #E869CD;
        font-size: 32rpx;
        line-height: 32rpx;

        border-radius: 28rpx;

        &.active {
          color: #fff;
          border: 2rpx solid rgba(255, 16, 251, .26);
          background-color: #A55BFF;
        }
      }
    }

    .nickname {
      margin-top: 14rpx;
      margin-left: 26rpx;

      color: #E560D1;
      font-size: 48rpx;
      line-height: 70rpx;
    }

    .birthday {
      margin-top: 6rpx;
      margin-left: 26rpx;

      color: #E560D1;
      font-size: 32rpx;
      line-height: 46rpx;
    }

    .score-title {
      position: absolute;
      top: 50rpx;
      right: 16rpx;

      color: #FBC143;
      font-size: 40rpx;
      line-height: 58rpx;

      text-shadow: 0 0 3rpx #F427BA, 0 0 3rpx #F427BA, 0 0 3rpx #F427BA, 0 0 3rpx #F427BA;
    }

    .score-number {
      position: absolute;
      bottom: 34rpx;
      right: 26rpx;

      color: #FBC143;
      font-size: 32rpx;
      line-height: 46rpx;

      text-shadow: 0 0 3rpx #F427BA, 0 0 3rpx #F427BA, 0 0 3rpx #F427BA, 0 0 3rpx #F427BA;
    }
  }

  .sub-box-2 {
    position: relative;
    width: 624rpx;
    height: 422rpx;

    margin-top: 24rpx;
    margin-left: 50rpx;

    box-sizing: border-box;
    padding: 40rpx 10rpx;

    .today-title {
      margin-left: 16rpx;

      display: flex;
      align-items: center;

      .title {
        margin: 0 14rpx;

        color: #FBC143;
        font-size: 48rpx;
        line-height: 66rpx;

        text-shadow: 0 0 4rpx #F427BA, 0 0 4rpx #F427BA, 0 0 4rpx #F427BA, 0 0 4rpx #F427BA, 0 0 10rpx #B04C8A;
      }

      .star {
        width: 44rpx;
        height: 44rpx;
      }
    }


    .bar {
      height: 48rpx;

      margin-top: 16rpx;
      margin-left: 26rpx;

      display: flex;
      align-items: center;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      .name {
        margin-left: 6rpx;

        color: #972A9A;
        font-size: 40rpx;
      }

      .progress {
        position: relative;
        width: 332rpx;
        height: 24rpx;
        margin: 0 14rpx;

        border-radius: 12rpx;
        background-color: rgba(#fff, .02);
        box-shadow: 0 2rpx 0 0 #fff, 0 4rpx 5rpx 0 #E98AC5 inset;

        .inner {
          height: 26rpx;

          border-radius: 13rem;

          transition: width .5s;
        }
      }

      .score {
        color: #A325A3;
        font-size: 28rpx;
      }
    }
  }
}

.detail {
  margin-left: 24rpx;

  .title {
    width: 234rpx;
    height: 88rpx;

    color: #7A3C36;
    font-size: 32rpx;
    line-height: 72rpx;
    text-align: center;

  }

  .desc {
    width: 702rpx;
    height: 175rpx;

    box-sizing: border-box;
    padding: 24rpx 36rpx 36rpx;

    .inner {
      height: 100%;

      color: #444;
      font-size: 24rpx;
      line-height: 34rpx;

      overflow-y: auto;
      touch-action: pan-y;

      // overflow: hidden;
      // display: -webkit-box;
      // line-clamp: 2;
      // -webkit-line-clamp: 2;
      // -webkit-box-orient: vertical;
    }
  }
}

.suggest {
  position: relative;
  width: 686rpx;

  margin: 150rpx auto 50rpx;

  box-sizing: border-box;
  padding: 120rpx 0 1rpx;

  background-color: rgba(255, 210, 244, .45);
  box-shadow: inset 4rpx 10rpx 38rpx 0 rgba(#fff, .82), 8rpx 10rpx 19rpx 0 #B250D5;
  border-radius: 36rpx;

  .title-image {
    position: absolute;
    top: -154rpx;
    left: 86rpx;

    width: 532rpx;
    height: 318rpx;
  }

  .item {
    position: relative;
    width: 612rpx;

    margin: 0 auto 36rpx;

    box-sizing: border-box;
    padding: 64rpx 30rpx 20rpx;

    background-color: #FFF3FF;
    box-shadow: inset 0 0 14rpx 0 #EF82FF;
    border-radius: 16rpx;

    .lock-mask {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: calc(100% - 30rpx);
      height: calc(100% - 30rpx);

      backdrop-filter: blur(10rpx);

      box-sizing: border-box;
      padding-top: 30rpx;

      display: flex;
      align-items: center;
      justify-content: center;

      color: #821CAF;
      font-size: 24rpx;
      line-height: 32rpx;

      .lock-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .icon {
      position: absolute;
      top: -30rpx;
      left: 0;

      width: 86rpx;
      height: 86rpx;
    }

    .title {
      position: absolute;
      top: -24rpx;
      left: 82rpx;

      height: 75rpx;

      box-sizing: border-box;
      padding: 0 26rpx;

      color: #E5607D;
      font-size: 32rpx;
      line-height: 70rpx;
      text-shadow: 0 0 4rpx #fff, 0 0 4rpx #fff, 0 0 4rpx #fff;
    }

    .description {
      color: #444;
      font-size: 24rpx;
      line-height: 34rpx;
    }
  }

  .wait {
    margin: 50rpx 0;

    text-align: center;
    text-shadow: 0 0 10rpx #fff, 0 0 10rpx #fff;
  }
}
</style>